<template>
	<div class="row-bg">
		<el-row type="flex"  justify="center">
		<el-col :xl="6" :lg="7">
			<h2 style="color:white">欢迎来到信控平台</h2>
			<!--<el-image :src="require('@/assets/img/logo.png')" style="height: 180px; width: 180px;"></el-image>-->
		</el-col>

		<el-col :span="1">
			<el-divider direction="vertical"></el-divider>
		</el-col>
		<el-col :xl="6" :lg="7">
			<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px">
				<el-form-item label="账号"  class="login-item" prop="username"  style="width: 380px;">
					<el-input v-model="loginForm.username" prefix-icon="el-icon-user"  placeholder="请输入账号"></el-input>
				</el-form-item>
				<el-form-item label="密码" class="login-item" prop="password"  style="width: 380px;">
					<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码"   type="password"></el-input>
				</el-form-item>
				<el-form-item label="验证码" class="login-item" prop="captchacode"  style="width: 380px;">
					<el-input v-model="loginForm.captchacode" prefix-icon="el-icon-price-tag" placeholder="请输入验证码"  style="width: 172px; float: left" maxlength="5"></el-input>
					<el-image :src="captchaImg" class="captchaImg" @click="getCaptcha"></el-image>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="submitForm('loginForm')" style="width:300px; margin-left:-100px">登录</el-button>
					<!--<el-button @click="resetForm('loginForm')">重置</el-button>-->
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
	</div>
</template>

<script>

	import request from "../utils/request";

	export default {
		name: "Login",
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
					captchacode: '',
					key: ''
				},

				captchaImg: null,
				rules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' }
					],
					captchacode: [
						{ required: true, message: '请输入验证码', trigger: 'blur' },
						{ min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur' }
					],
				},
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						request.post('/login?',this.loginForm).then(res => {

							if(res.code === '0'){
								this.$message({
									type: "success",
									message: "登录成功"
								})
								sessionStorage.setItem("user", JSON.stringify(res.data.user))  // 缓存用户信息
								sessionStorage.setItem("token",res.data.token) //缓存用户的token
								this.$store.state.isLogin = true;
								sessionStorage.setItem("isLogin","true");
								this.$router.push("/home")  //登录成功之后进行页面的跳转，跳转到主页
							}
						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			getCaptcha() {
				request.get('/captcha').then(res => {
					this.loginForm.key = res.data.token
					this.captchaImg = res.data.captchaImg
					this.loginForm.captchacode = ''
				})
			}
		},
		created() {
			this.getCaptcha()
		}
	}
</script>

<style scoped>

	.row-bg{
		background-image:url("../assets/img/bg3.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100%;
	}

	.el-row {
		height: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.el-divider {
		height: 200px;
	}

	.captchaImg {
		float: left;
		margin-left: 8px;
		border-radius: 4px;
	}




</style>

<style>
	.login-item .el-form-item__label{
		color: white;
	}
</style>
